<template>
	<view class="wrap">
		<view class="topBc"></view>
		<view class="content formWrap">
			<view class="title" style="margin-top: 0;">对外担保信息</view>
			
			<u-form :model="formData" ref="uForm" :rules="rules">
				<u-form-item label="是否有对外担保" prop="sta" required label-width="auto" borderBottom>
					<u-radio-group v-model="formData.sta" placement="row">
						<u-radio v-for="item,index in stateRanges" :key="index" @change="checkboxChange" :label="item.text" :name="item.value" :activeColor="bgColor"></u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>

			<view class="listWrap">
				<view class="list" v-for="item,index in list" :key="index">
					<view class="lineWrap">
						<view class="line">
							<view class="tit">是否公式</view>
							<view class="con">
								<u-radio-group v-model="item.moredis" placement="row">
									<u-radio v-for="ite,ind in stateRanges" :key="ind" :label="ite.text" :name="ite.value" :activeColor="bgColor"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="line">
							<view class="tit">债权人</view>
							<view class="con">
								<u-input v-model="item.more" placeholder="请输入" border="none" inputAlign="center"></u-input>
							</view>
						</view>
						<view class="line">
							<view class="tit">债务人</view>
							<view class="con">
								<u-input v-model="item.mortgagor" placeholder="请输入" border="none" inputAlign="center"></u-input>
							</view>
						</view>
						<view class="line">
							<view class="tit">主债权种类</view>
							<view class="con" @click="selectWebType(index)">
								<u--input v-model="item.priclaseckindText" placeholder="请选择" border="none" disabled disabledColor="rgba(0,0,0,0)" inputAlign="center"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="line">
							<view class="tit">主债权数额</view>
							<view class="con">
								<u-input v-model="item.priclasecam" placeholder="请输入" border="none" inputAlign="center"></u-input>
							</view>
						</view>
						<view class="line">
							<view class="tit">履行债务的期限</view>
							<view class="con uni-datetime-picker_wrap">
								<uni-datetime-picker 
									v-model="item.pefperform_pefperto" 
									placeholder="请选择" 
									type="daterange" :border="false"
									:clear-icon="false"
									return-type="timestamp"
									@change="datetimeChange($event,index,'pefperform','pefperto')"
								/>
							</view>
						</view>
						<view class="line">
							<view class="tit">保证的期间</view>
							<view class="con">
								<u-radio-group v-model="item.guaranperiod" placement="row">
									<u-radio v-for="ite,ind in Ranges2" :key="ind" :label="ite.text" :name="ite.value" :activeColor="bgColor"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="line_across">
							<view class="line_across_tit" style="border-bottom: 0;">保证的方式</view>
							<view class="line_across_con" style="border-bottom: 0;">
								<u-radio-group v-model="item.gatype" placement="row">
									<u-radio v-for="ite,ind in Ranges3" :key="ind" :label="ite.text" :name="ite.value" :activeColor="bgColor"></u-radio>
								</u-radio-group>
							</view>
						</view>
						
					</view>
					
					<view class="deleteBtn" @click="deleteBtn(index)">
						<view class="text">移</view>
						<view class="text">除</view>
					</view>

				</view>
				<view class="addBtnWrap" v-if="formData.sta == 1">
					<u-button text="添加" @click="addBtn()" :color="bgColor"></u-button>
				</view>
			</view>
			
		</view>
		<view class="submitBtn_bc"></view>
		<view class="submitBtn_ubtn">
			<u-button :disabled="!$util.submitState(year,state)" @click="submit()">提交</u-button>
		</view>
		
		<u-action-sheet :show="showSelect" :actions="typeList" cancelText="取消" @close="showSelect = false" @select="selectBtn($event,'priclaseckind')"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data(){
		return{
			minFormName: 'forguaranteeinfo', //小表单类型名
			regnoInfo: this.$store.state.regnoInfo,
			year: '',
			state: '',
			bgColor: this.$config.bgColor,
			pickerIndex: 0,
			
			showSelect: false,
			typeList: [],
			
			list: [],
			stateRanges: [
				{text: '是',value: '1'},
				{text: '否',value: '2'}
			],
			Ranges2: [],
			Ranges3: [],

			formData: {
				sta: '',
			},
			rules: {
				sta: this.$typeData.ruleData.disRule,
			},
		}
	},
	onLoad(option) {
		this.year = option.year;
		this.state = option.state;
		this.typeList = this.$util.getLocalDictMap('priclaseckind','id','name');
		this.Ranges2 = this.$util.getLocalDictMap('guaranperiod','value','text');
		this.Ranges3 = this.$util.getLocalDictMap('gatype','value','text');
		this.getWebList();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods:{
		datetimeChange(e,index,start,end){
			this.list[index][start] = e[0];
			this.list[index][end] = e[1];
		},
		submit(){
			let _this = this;
			this.$refs.uForm.validate().then(res => {
				let sta = true;
				if(_this.formData.sta == '1'){
					let data = this.list[this.list.length-1];
					let keys = Object.keys(data);
					for(let i=0; i<keys.length; i++){
						if(!data[keys[i]]){
							this.$util.showToast({title:'请完善信息！'})
							sta = false;
							break;
						}
					}
				}
				if(sta){
					this.webListSave();
				}
			}).catch(errors => {
				this.$util.showToast({title:'请完善信息'})
			})
		},
		webListSave(){
			this.$http.sendRequest({
				url: '/annual/report/forguaranteeinfo/overwrite',
				method: 'PUT',
				data: {
					ancheyear: this.year,
				    regno: this.regnoInfo.regno,
				    forguaranteeinfoList: this.list
				}
			})
			.then(res=>{
				this.setRecord();
			})
			.catch(err=>{})
		},
		getWebList(){
			let url = this.$typeData.minFormUrl.get(this.minFormName);
			if(!url){
				uni.showModal({
					title: '暂无接口'
				})
				return;
			}
			this.$http.sendRequest({
				url: url,
				data: {
					regno: this.regnoInfo.regno,
					ancheyear: this.year
				}
			})
			.then(res=>{
				console.log('获取列表',res);
				if(res.data && res.data.length>0){
					let arr = [];
					res.data.forEach(item=>{
						let text = this.setSelectData(item.priclaseckind);
						let obj = {
							moredis: item.moredis,
							more: item.more,
							mortgagor: item.mortgagor,
							priclaseckind: item.priclaseckind,
							priclaseckindText: text.name,
							priclasecam: item.priclasecam,
							pefperform_pefperto: [item.pefperform,item.pefperto],
							pefperform: item.pefperform,
							pefperto: item.pefperto,
							guaranperiod: item.guaranperiod,
							gatype: item.gatype,
						}
						arr.push(obj)
					})
					this.formData.sta = '1'
					this.list = arr;
				}else{
					this.formData.sta = '2'
				}
			})
			.catch(err=>{})
		},
		addBtn(){
			let data = this.list[this.list.length-1];
			let keys = Object.keys(data);
			for(let i=0; i<keys.length; i++){
				if(!data[keys[i]]){
					this.$util.showToast({title:'请先完善信息！'})
					return;
				}
			}
			let obj = {
				moredis: '',
				more: '',
				mortgagor: '',
				priclaseckind: '',
				priclaseckindText: '',
				priclasecam: '',
				pefperform_pefperto: [],
				pefperform: '',
				pefperto: '',
				guaranperiod: '',
				gatype: '',
			}
			this.list.push(obj);
		},
		deleteBtn(index){
			if(this.list.length>1){
				this.list.splice(index,1);
			}else{
				this.$util.showToast({title:'删除失败，至少保留一条'})
			}
		},
		checkboxChange(e){
			if(e == this.formData.sta) return;
			this.formData.sta = e;
			let obj = {
				moredis: '',
				more: '',
				mortgagor: '',
				priclaseckind: '',
				priclaseckindText: '',
				priclasecam: '',
				pefperform_pefperto: [],
				pefperform: '',
				pefperto: '',
				guaranperiod: '',
				gatype: '',
			}
			if(this.formData.sta == 1){
				this.list.push(obj);
			}else{
				this.list = [];
			}
		},
		selectWebType(index){
			this.listIndex = index;
			this.showSelect = true;
		},
		selectBtn(e,dataName){
			this.list[this.listIndex][`${dataName}Text`] = e.name;
			this.list[this.listIndex][dataName] = e.id;
		},
		setSelectData(id){
			let arr = this.typeList;
			let obj = {};
			for(let i=0; i<arr.length; i++){
				if(arr[i].id == id){
					obj = arr[i];
					break;
				}
			}
			let data = {
				name: '',
				id: '',
			};
			if(obj.id){
				data.name = obj.name;
				data.id = obj.id;
				return data;
			}
		},
		
		
		
		
		
		//存一下记录
		setRecord(){
			let fillingItem = this.$minFormType.get(this.minFormName);
			this.$http.sendRequest({
				url: '/annual/report/record',
				method: 'POST',
				data: {
					regno: this.regnoInfo.regno,
					year: this.year,
					fillingItem: fillingItem,
					isImp: '0',
				},
				hideLoad: true,
			})
			.then(res=>{
				uni.navigateBack();
			})
			.catch(err=>{})
		},
		goPage(path){
			uni.navigateTo({
				url: path
			})
		},
	}
}
</script>

<style lang="scss">
.wrap{
	width: 100vw;
	min-height: 100vh;
	padding-top: 16rpx;
	box-sizing: border-box;
	position: relative;
	background-color: #FFF;
	
	.topBc{
		height: 10rpx;
		background-color: #F5F6F8;
	}
}

.content{
	padding: 30rpx 36rpx;
	background-color: #FFF;
	
	.title{
		color: #E4B269;
		font-size: 36rpx;
		font-weight: bold;
		border-left: 8rpx solid #E4B269;
		line-height: 40rpx;
		padding-left: 16rpx;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	
	.listWrap{
		width: 100%;
		margin-top: 30rpx;
		
		.list{
			width: 100%;
			min-height: 190rpx;
			background-color: #FFF;
			border: 2rpx solid $uni-bg-color;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			
			.lineWrap{
				width: 90%;
				
				.u-radio-group{
					justify-content: center;
				}
				.u-radio{
					margin-left: 10rpx;
					margin-right: 10rpx;
				}
				
				.line{
					width: 100%;
					height: 64rpx;
					display: flex;
					align-items: center;
					
					.tit{
						width: 40%;
						height: 100%;
						box-sizing: border-box;
						font-size: 28rpx;
						font-weight: bold;
						display: flex;
						justify-content: center;
						align-items: center;
						border-right: 2rpx solid $uni-bg-color;
						border-bottom: 2rpx solid $uni-bg-color;
						color: $uni-bg-color;
					}
					.con{
						width: 60%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						border-right: 2rpx solid $uni-bg-color;
						border-bottom: 2rpx solid $uni-bg-color;
						padding: 0 16rpx;
						color: #000;
					}
				}
				
				.line_across{
					width: 100%;
					
					.line_across_tit{
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: $uni-bg-color;
						border-right: 2rpx solid $uni-bg-color;
					}
					.line_across_con{
						width: 100%;
						padding: 0rpx 16rpx 10rpx;
						box-sizing: border-box;
						border-right: 2rpx solid $uni-bg-color;
						border-bottom: 2rpx solid $uni-bg-color;
						
						.u-checkbox-group{
							display: flex;
							flex-flow: wrap;
						}
						.u-checkbox{
							margin: 0 10rpx 10rpx;
						}
					}
					
				}
				
			}
			
			
			
			.deleteBtn{
				width: 10%;
				padding: 20% 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(249,81,81,0.9);
				font-weight: bold;
				
				.text{
					font-size: 28rpx;
					color: #FFF;
					
				}
			}
			
		}
		
		.addBtnWrap{
			width: 300rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: center;
		}
	}
}




.uni-datetime-picker_wrap .icon-calendar{
	display: none;
}
.uni-datetime-picker_wrap .uni-date-x{
	background-color: rgba(0, 0, 0, 0);
}
.uni-datetime-picker_wrap .uni-date__x-input{
	font-size: 28rpx;
	text-align: center;
}
.uni-datetime-picker_wrap .uni-date-editor{
	height: 100% !important;
}
.uni-datetime-picker_wrap .uni-date-editor--x{
	height: 100% !important;
}
.uni-datetime-picker_wrap .uniui-calendar{
	display: none;
}
.uni-datetime-picker_wrap .uni-datetime-picker--btn{
	background-color: $uni-bg-color !important;
}
.uni-datetime-picker_wrap .uni-calendar-item__weeks-box .uni-calendar-item--checked {
	background-color: $uni-bg-color !important;
}
.uni-datetime-picker_wrap .uni-calendar-item--multiple .uni-calendar-item--before-checked, 
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
	background-color: $uni-bg-color !important;
}
.uni-datetime-picker_wrap .uni-calendar-item--multiple {
	background-color: rgba(170,170,170,0.7) !important;
}
.uni-datetime-picker_wrap .uni-calendar-item__weeks-box-item{
	background-color: rgba(0,0,0,0) !important;
}

</style>